<template>
  <u-modal
    :show="show"
    :title="title"
    :content="content"
    @confirm="confirm"
    ref="uModal"
    :showConfirmButton="false"
    :showCancelButton="false"
    @close="cancelModal"
    @cancel="cancelModal"
    :closeOnClickOverlay="true"
  >
    <view class="slot-content">
      <slot>
        <view class="main-modal-box">
          <view class="box-l">
            <u-icon name="info-circle" size="28" color="#2979ff"></u-icon>
          </view>
          <view class="box-r">
            <view class="header">
              <rich-text :nodes="title"></rich-text>
            </view>
            <view class="content">
              <rich-text :nodes="content"></rich-text>
            </view>
          </view>
        </view>
      </slot>
      <view class="footer-btn">
        <u-button class="btn" @click="cancelModal" text="取消"></u-button>
        <u-button
          class="btn"
          type="primary"
          @click="confirm"
          text="确认"
        ></u-button>
      </view>
    </view>
  </u-modal>
</template>
<script>
export default {
  props: {
    value: Boolean,
    title: String,
    content: String,
  },
  data() {
    return {
      show: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val, old) {
        this.show = val;
      },
    },
  },
  methods: {
    confirm() {
      this.$emit("confirm", () => {
        this.show = false;
        this.$emit("input", false);
      });
    },
    cancelModal() {
      this.show = false;
      this.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.my-modal {
  width: 100%;
}
.main-modal-box {
  display: flex;
  align-items: flex-start;
  padding-bottom: 60rpx;
  .box-l {
    margin-right: 20rpx;
  }
  .header {
    font-size: 20px;
    margin-bottom: 10rpx;
  }
  .content {
    font-size: 16px;
  }
}
.slot-content {
  width: 100%;
  margin-bottom: 20px;
}
.footer-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx;
  align-items: flex-end;
  justify-content: end;
  .btn {
    height: 32px;
    padding: 0px 12px;
    margin: 0;
    margin-right: 10rpx;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
